import {observer} from 'mobx-react-lite';
import {
  Path,
  Rect,
  G,
  Defs,
  Stop,
  LinearGradient,
  Circle,
  ClipPath,
  SvgProps,
  Svg,
} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';

export const SvgToPay = observer((props: SvgProps) => {
  const {theme} = useGlobalStore();
  return (
    <Svg width="33" height="32" viewBox="0 0 33 32" fill="none">
      <Circle
        cx="7.24819"
        cy="7.24819"
        r="7.24819"
        transform="matrix(0.948232 -0.317579 -0.317579 -0.948232 5.30371 32)"
        fill="url(#paint0_linear_1347_19804)"
      />
      <Path
        d="M25.9772 6.70951V6.72254H25.9902H28.2047C28.6053 6.72254 28.93 7.04721 28.93 7.4477C28.93 7.8482 28.6053 8.17289 28.2048 8.17289H25.9902H25.9772V8.18592V10.4005C25.9772 10.8011 25.6525 11.1257 25.252 11.1257C24.8515 11.1257 24.5268 10.8011 24.5268 10.4005V8.18592V8.17289H24.5138H22.2992C21.8987 8.17289 21.574 7.8482 21.574 7.4477C21.574 7.04721 21.8987 6.72254 22.2992 6.72254H24.5137H24.5268V6.70951V4.49493C24.5268 4.0944 24.8515 3.76973 25.252 3.76973C25.6525 3.76973 25.9772 4.09443 25.9772 4.49493V6.70951Z"
        fill={getColorStr(theme, 'color_31')}
        stroke={getColorStr(theme, 'color_31')}
        strokeWidth="0.026042"
      />
      <Path
        d="M19.5231 16.6966H13.8768C13.6312 16.6919 13.3971 16.5911 13.225 16.4157C13.0529 16.2403 12.9564 16.0043 12.9564 15.7585C12.9564 15.5128 13.0529 15.2768 13.225 15.1014C13.3971 14.926 13.6312 14.8252 13.8768 14.8205H19.5231C19.7687 14.8252 20.0028 14.926 20.1749 15.1014C20.347 15.2768 20.4434 15.5128 20.4434 15.7585C20.4434 16.0043 20.347 16.2403 20.1749 16.4157C20.0028 16.5911 19.7687 16.6919 19.5231 16.6966Z"
        fill={getColorStr(theme, 'color_1')}
        stroke={getColorStr(theme, 'color_31')}
        strokeWidth="0.026042"
      />
      <Path
        d="M19.5231 19.0499H13.8768C13.6312 19.0452 13.3971 18.9444 13.225 18.769C13.0529 18.5936 12.9564 18.3576 12.9564 18.1118C12.9564 17.8661 13.0529 17.6301 13.225 17.4547C13.3971 17.2793 13.6312 17.1785 13.8768 17.1738H19.5231C19.7687 17.1785 20.0028 17.2793 20.1749 17.4547C20.347 17.6301 20.4434 17.8661 20.4434 18.1118C20.4434 18.3576 20.347 18.5936 20.1749 18.769C20.0028 18.9444 19.7687 19.0452 19.5231 19.0499Z"
        fill={getColorStr(theme, 'color_1')}
        stroke={getColorStr(theme, 'color_1')}
        strokeWidth="0.026042"
      />
      <Path
        d="M16.7 21.7236C16.448 21.7236 16.2064 21.6212 16.0281 21.4388C15.8497 21.2564 15.7493 21.0089 15.7487 20.7506V15.108C15.7487 14.8494 15.8489 14.6014 16.0273 14.4185C16.2057 14.2356 16.4477 14.1329 16.7 14.1329C16.9523 14.1329 17.1942 14.2356 17.3726 14.4185C17.551 14.6014 17.6512 14.8494 17.6512 15.108V20.7506C17.6507 21.0089 17.5502 21.2564 17.3719 21.4388C17.1935 21.6212 16.9519 21.7236 16.7 21.7236Z"
        fill={getColorStr(theme, 'color_1')}
      />
      <Path
        d="M16.6681 15.2465C16.2793 15.2482 15.9028 15.1109 15.6063 14.8594L13.0367 12.6623C12.9402 12.5816 12.8607 12.4826 12.8027 12.3709C12.7448 12.2593 12.7095 12.1372 12.699 12.0119C12.6886 11.8865 12.7031 11.7604 12.7417 11.6406C12.7803 11.5209 12.8423 11.4101 12.924 11.3145C13.0058 11.2189 13.1057 11.1404 13.2179 11.0837C13.3302 11.0269 13.4526 10.993 13.5781 10.9839C13.7035 10.9748 13.8295 10.9907 13.9488 11.0306C14.0681 11.0705 14.1783 11.1337 14.273 11.2164L16.6681 13.2647L19.1269 11.1629C19.2216 11.0801 19.3318 11.0169 19.4511 10.977C19.5704 10.9371 19.6964 10.9212 19.8218 10.9304C19.9473 10.9395 20.0697 10.9734 20.182 11.0301C20.2942 11.0869 20.3941 11.1653 20.4759 11.2609C20.5576 11.3565 20.6196 11.4674 20.6582 11.5871C20.6968 11.7068 20.7113 11.833 20.7008 11.9583C20.6904 12.0837 20.6551 12.2057 20.5972 12.3173C20.5392 12.429 20.4597 12.528 20.3632 12.6087L17.7302 14.8594C17.4336 15.1109 17.0569 15.2482 16.6681 15.2465Z"
        fill={getColorStr(theme, 'color_1')}
      />
      <Path
        d="M16.6999 29.3333C14.9004 29.3333 13.1541 28.9806 11.5096 28.2851C9.9218 27.6135 8.49597 26.6523 7.27181 25.4281C6.04766 24.2039 5.08642 22.7781 4.41479 21.1903C3.71926 19.5458 3.36658 17.7995 3.36658 16C3.36658 14.2005 3.71926 12.4542 4.41479 10.8097C5.08642 9.22188 6.04763 7.79605 7.27181 6.57189C8.496 5.34773 9.92182 4.3865 11.5096 3.71487C13.1541 3.01934 14.9004 2.66666 16.6999 2.66666C18.2665 2.66666 19.8012 2.93619 21.2614 3.46776C21.802 3.66459 22.0806 4.26238 21.8838 4.80296C21.687 5.34359 21.0892 5.62224 20.5486 5.42544C19.3176 4.97726 18.0227 4.75002 16.6999 4.75002C10.4966 4.75002 5.44991 9.79675 5.44991 16C5.44991 22.2033 10.4966 27.25 16.6999 27.25C22.9031 27.25 27.9499 22.2033 27.9499 16C27.9499 14.6772 27.7226 13.3822 27.2745 12.1512C27.0777 11.6106 27.3564 11.0129 27.8969 10.816C28.4375 10.6192 29.0353 10.8979 29.2321 11.4385C29.7637 12.8986 30.0332 14.4333 30.0332 16C30.0332 17.7995 29.6805 19.5458 28.985 21.1902C28.3134 22.7781 27.3522 24.2039 26.128 25.4281C24.9038 26.6522 23.478 27.6135 21.8902 28.2851C20.2457 28.9806 18.4995 29.3333 16.6999 29.3333Z"
        fill={getColorStr(theme, 'color_31')}
      />
      <Defs>
        <LinearGradient
          id="paint0_linear_1347_19804"
          x1="7.24819"
          y1="0"
          x2="7.24819"
          y2="14.4964"
          gradientUnits="userSpaceOnUse">
          <Stop stopColor={getColorStr(theme, 'color_2')} />
          <Stop offset="1" stopColor={getColorStr(theme, 'color_1')} />
        </LinearGradient>
      </Defs>
    </Svg>
  );
});
